<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--这里是讲解区-->
<!--1.准备容器
    2.引包
    3.创建实例
    4.添加配置项，完成渲染
        4.1 el指定挂载点
        4.2 data提供数据
-->

<!--导入区-->
<!-- 引入的是开发版本包 - 包含完整的注释和警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

<body>
<!--vue渲染区-->
<!--编写一些用于渲染的代码逻辑-->
<div id="app">
    <h1>{{ msg }}</h1>
</div>
<!--script代码区-->
<script>
    //创建一个vue实例(一旦引入了vue核心包，在全局环境就有了vue构造函数)
    const app = new Vue({
        // 指定挂载点在id名为app的渲染区代码中
        el: `#app`,
        // 通过data提供数据
        data: {
            // 字符型数据(用''和""都没问题)
            msg: 'hello black',
            // 数字型数据(没有任何字段)
            count: 666
        }
    })
</script>
</body>
</html>